﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:commonControls="clr-namespace:NASA.BeAMartian.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    x:Class="NASA.BeAMartian.Controls.CraterSelector"
    mc:Ignorable="d">
    
    <UserControl.Resources>

        <Style x:Key="ClipContentOneControl" TargetType="commonControls:ClipContentControl">
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Margin" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="commonControls:ClipContentControl">
                        <Grid x:Name="MainGrid">
                            <Grid.Clip>
                                <RectangleGeometry x:Name="ClipRectangleGeometry" RadiusX="6" RadiusY="6"/>
                            </Grid.Clip>
                            <ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Button Background Color -->
        <Color x:Key="BackgroundColorThree">#FF008DCF</Color>
        <SolidColorBrush x:Key="BackgroundColorThreeBrush" Color="{StaticResource BackgroundColorThree}"/>


        <Style x:Key="DeleteButtonStyle" TargetType="Button">
            <Setter Property="Width" Value="32"/>
            <Setter Property="Height" Value="32"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootElement" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF0082BE"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF002638"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF002638"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF0082BE"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentFocusVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Canvas Width="32" Height="32">
                                <Ellipse x:Name="BackgroundGradient" Stroke="White" StrokeThickness="2" Height="32" Width="32">
                                    <Ellipse.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF002638" Offset="0"/>
                                            <GradientStop Color="#FF0082BE" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                                <Path x:Name="X" Fill="White" Stretch="Fill" Height="15.374" Canvas.Left="8" Canvas.Top="8" Width="16.717" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" Data="M0.26855466,2.2613707 L2.9487305,2.2613707 L4.3452148,4.6837339 L5.6987305,2.2613707 L8.3520508,2.2613707 L5.902832,6.0748472 L8.5830078,10.135394 L5.8491211,10.135394 L4.296875,7.6056089 L2.7392578,10.135394 L0.021484375,10.135394 L2.7392578,6.0318785 z"/>
                            </Canvas>
                            <Ellipse x:Name="ContentFocusVisualElement" Stroke="{StaticResource ForegroundColorFiveBrush}" StrokeThickness="1" Margin="2" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="ResizableThumbOneStyle" TargetType="commonControls:ResizableThumb">
            <Setter Property="IsTabStop" Value="True" />
            <Setter Property="MinWidth" Value="40" />
            <Setter Property="MinHeight" Value="40" />
            <Setter Property="Background" Value="{StaticResource BackgroundColorThreeBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource ForegroundColorOneBrush}" />
            <Setter Property="BorderThickness" Value="15" />
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="commonControls:ResizableThumb">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                	<VisualState x:Name="Selected"/>
                                	<VisualState x:Name="Unselected"/>
                                	<VisualState x:Name="SelectedInactive"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Unfocused"/>

                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="InnerBorderElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Crater_Hex_OuterRing" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <!-- if you change the dimenstions of the inner circle then you need to make sure the diameter of the 
                                 crater data being passed back is similar -->
                            <!-- if you change the dimenstions of the inner circle then you need to make sure the diameter of the 
                                 crater data being passed back is similar -->
                        	<Ellipse x:Name="InnerCircle" Cursor="Hand" Fill="#FF0082BE" Margin="{TemplateBinding BorderThickness}"/>
                        	<Path x:Name="BorderElement" Cursor="Hand" Data="M98.75,63.000004 C98.749992,91.442665 75.919815,118.75 53,118.75 C30.080181,118.75 7.75,91.442665 7.75,63.000004 C7.75,34.557339 30.084764,7.291707 53,7.7500057 C78.000008,8.249999 98.750008,31.249996 98.75,63.000004 z M52.999504,2.5 L3.75,28.699036 L3.75,98.25193 L52.999504,124.451 L102.75001,98.25193 L102.75001,28.699036 z" Opacity="0.6" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="15" Margin="-4,-5.25,-4,-5.701" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5">
                        		<Path.RenderTransform>
                        			<CompositeTransform ScaleX="0.93" ScaleY="0.95"/>
                        		</Path.RenderTransform>
                        	</Path>
                        	<Ellipse x:Name="InnerBorderElement" Cursor="Hand" IsHitTestVisible="False" Stroke="{TemplateBinding BorderBrush}" Opacity="0" Margin="12" StrokeThickness="3"/>
                        	<Ellipse x:Name="OutterBorderElement" Cursor="Hand" IsHitTestVisible="False" Stroke="{TemplateBinding BorderBrush}" Opacity="0" StrokeThickness="3"/>
                        	<Path x:Name="Crater_Hex_OuterRing" Fill="{StaticResource ForegroundColorEightBrush}" Stretch="Fill" Margin="-2.5,-5.25,-2.5,-5.75" UseLayoutRounding="False" Data="F1 M349.6561,425.38214 L298.44919,452.08481 L247.24239,425.63168 L247.24239,354.75839 L298.44919,327.80521 L349.6561,354.75839 z M298.44919,321.82111 L241.49318,351.01724 L241.49318,429.37186 L298.44919,458.56796 L355.40536,429.37186 L355.40536,351.01724 z" Stroke="White" Opacity="0.8" IsHitTestVisible="False"/>
							<Path x:Name="Crosshairs" Stretch="Fill" Cursor="Hand" Stroke="{StaticResource ForegroundColorOneBrush}" Width="15" Height="15" Data="M1,15.918518 L11.164999,15.918518 L11.164999,25.918518 M16.579529,25.919035 L16.579529,15.754036 L26.579529,15.754036 M26.662041,11.000513 L16.497042,11.000513 L16.497042,1.0005136 M11.082519,1 L11.082519,11.164999 L1.0825186,11.164999"/>
                        	<commonControls:EllipticalLayout HorizontalAlignment="Stretch" VerticalAlignment="Stretch" UseLayoutRounding="False" >
                        		<Button x:Name="DeleteButton" Style="{StaticResource DeleteButtonStyle}" Tag="{Binding}" Click="DeleteButton_Click" Width="32" Height="32" UseLayoutRounding="False" commonControls:EllipticalLayout.Angle="305.0">
                        			<Button.RenderTransform>
                        				<TransformGroup>
                        					<ScaleTransform/>
                        					<SkewTransform/>
                        					<RotateTransform/>
                        					<TranslateTransform Y="-18" X="-14"/>
                        				</TransformGroup>
                        			</Button.RenderTransform>
                        		</Button>
                        	</commonControls:EllipticalLayout>
                            
                            <!--<ContentPresenter
                                x:Name="ContentPresenter"
                                Content="{x:Null}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>-->
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        
        
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot">
        <commonControls:ClipContentControl Style="{StaticResource ClipContentOneControl}" >
            <Grid Background="{StaticResource BackgroundColorOneBrush}">
                <Canvas x:Name="MainContainer" HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <StackPanel x:Name="ImageStack" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                    <Canvas x:Name="MainCanvas" Opacity="0.4"/>
                </Canvas>
            </Grid>
        </commonControls:ClipContentControl>
        <commonControls:ProcessingIndicator x:Name="ProcessingIndicator" IsHitTestVisible="False" Opacity="0.0" Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center" />
   </Grid>
</UserControl>
